<!--
 * @Description: tabbarStudnt- 我的课程-内层
 * @Author: your name
 * @Date: 2024-05-30
 * @LastEditTime: 2024-05-30
 * @LastEditors: Please set LastEditors
-->

<template>
  <div class="right_con">
    <el-tabs v-model="activeCourse" class="my-favor" @tab-click="handleClick">
      <el-tab-pane
        :label="item"
        :name="index"
        v-for="(item, index) in typeComboTabs"
        :key="item + index"
      ></el-tab-pane>
    </el-tabs>

    <div v-if="myCourseList.length !== 0">
      <ul>
        <li v-for="(item_t, i) in myCourseList" :key="item_t.id">
          <div class="info_img">
            <img :src="item_t.image" alt="" />
          </div>
          <div class="info_detail">
            <h6>{{ item_t.title }}</h6>
            <p class="buy_time">
              购买时间：
              <span>{{ item_t.createtime }}</span>
              至：
              <span class="datatime"></span>
            </p>
          </div>
          <el-button type="danger" @click="toStudy(i, item_t)">
            {{ item_t.button_text }}
          </el-button>
        </li>
      </ul>
    </div>

    <!-- 暂无数据 -->
    <div class="noData" style="text-align: center" v-else>
      <img src="@/assets/images/noData.png" alt="" style="height: 100%" />
    </div>

    <!-- 直播课程 -->
    <!-- <div class="liveCourses" v-if="activeCourse == 0">
      <ul>
        <li>
          <div class="info_img">
            <img
              src="https://img.rongyuejiaoyu.com/uploads/20240116/83919b98c1835fd5f2a4e351e02fce43.jpg"
              alt=""
            />
          </div>
          <div class="info_detail">
            <h6>CFA TI BA II PLUS计算器使用教程</h6>
            <p class="buy_time">
              直播开始时间：
              <span>2024-02-22 14:26:24</span>
            </p>
            <p>
              <span>免费</span>
              |
              <span>Meng老师</span>
            </p>
          </div>

          <el-button type="danger" @click="liveBroadcast(i)">
            观看直播
          </el-button>
        </li>
      </ul>
    </div> -->
  </div>
</template>

<script>
import { getMyComboList, getMyComboType } from '@/api/homes_tabs'

export default {
  name: 'tabbarStudnt',
  data() {
    return {
      activeCourse: '1',
      myCourseList: [],
      typeComboTabs: [],
      type_IdActive: '1'
    }
  },
  created() {
    this.getCourseList(this.type_IdActive)
    getMyComboType().then(({ data: data }) => {
      this.typeComboTabs = data.data
    })
  },
  methods: {
    getCourseList(tabId) {
      let params = {
        cate_id: 0,
        level_id: 0,
        page: 1,
        type_id: tabId
      }
      getMyComboList(params).then(({ data: data }) => {
        this.myCourseList = data.data.list
      })
    },
    handleClick(tab) {
      this.type_IdActive = tab.name
      this.getCourseList(tab.name)
    },
    toStudy(index, item) {
      if (index == 0) {
        this.$router.push({
          path: '/newzhike',
          query: {
            Id: item.id
          }
        })
      } else {
        this.$router.push({
          path: '/lineCourseList',
          query: {
            id: item.id
          }
        })
      }
    },
    liveBroadcast() {
      this.$router.push({
        path: '/newzhike/playback',
        query: {}
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/Order_couse.scss';

.my-favor {
  ::v-deep .el-tabs__nav-wrap::after {
    display: block;
    height: 2px;
    background-color: #ececec !important;
  }
}
</style>
